import React, { Component } from 'react';
export default class JSX extends Component {
    constructor() {
        super();
        this.state = {
            // 数组遍历
            movies: ["大话西游", "盗梦空间", "星际穿越", "流浪地球"],
            // 数值修改
            num: 0,
            // 属性绑定
            propsState:{
                title: "标题",
                imgUrl: "http://p2.music.126.net/L8IDEWMk_6vyT0asSkPgXw==/109951163990535633.jpg",
                link: "http://www.baidu.com",
                active: true
            },
            // v-show
            showContent: true 
        }
    }
    increment(){
        this.setState({
            num: this.state.num + 1
        })
    }
    decrement = () => {
        this.setState({
            num: this.state.num - 1
        })
    }
    // 参数传递
    btnClick1(e){
        console.log(e);
    }
    btnClick2(params,event){
        console.log(params,event);
    }
    render() {
        const { propsState } = this.state;
        return (
            <div>
                <h2>数组遍历</h2>
                <ul>
                    {
                        this.state.movies.map((item, index) => {
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
                <h2>数值修改</h2>
                <div>{this.state.num}</div>
                <button onClick={() => this.increment()}>点击加一</button>
                <h2>属性绑定</h2>
                <div title={propsState.title} className={propsState.active ? "active" : ""}>
                    <a href={propsState.link}>跳转链接</a>
                     <img src={propsState.imgUrl} alt='' style={{ width: "50px", height: "50px"}}/>
                </div>
                <h2>this绑定</h2>
                <button onClick={this.increment.bind(this)}>bind绑定this(显示绑定)</button><br/>
                <button onClick={this.decrement}>定义函数时, 使用箭头函数</button><br/>
                <button onClick={() => this.increment()}>直接传入一个箭头函数, 在箭头函数中调用需要执行的函数</button>
                <h2>传递参数</h2>
                <button onClick={(e) => this.btnClick1(e)}>传递事件对象</button><br />
                <button onClick={(e) => this.btnClick2(111,e)}>按钮2</button>
                <h2>v-show实现</h2>
                <button style={{display: this.state.showContent ? "block" : "none"}} onClick={() => this.setState({showContent: !this.state.showContent})}>显示内容/隐藏</button>
                
            </div>
        )
    }
}
